<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>	
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path;
%>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>储值明细详情</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style type="text/css">
html,body{
	margin: 0 0 0 0;
	padding: 0;
}
.day{
	  background-color: #f0f0f0;
    border-radius: 0 15px 15px 0;
    width: 110px;
    margin: 10px 0 0 0;
    padding: 0 0 0 10px;
    font-size: 14px;
    font-weight: 200;
    line-height: 30px;
}
.data{
	border-bottom: solid 1px #e0e0e0;
	margin: 0 10px 0 10px;
}
.data div{
	display: inline-block;
	/* width: 30%; */
	line-height: 50px;
}
.data .time{
	text-align: left;
	padding-left: 5px;
  font-size: 14px;
  font-weight: 200;
}
.data .storeName{
	text-align: right;
  font-size: 14px;
  font-weight: 400;
}
.data .tradeValue{
	text-align: right;
  font-size: 14px;
  font-weight: 200;
  float: right;
}
.data .reduce{
  color: #666666;
}
.data .add{
  color: #f6905f;
}
</style>
</head>
<body>
	<div id="info">
	</div>
	<div class="loading" style="width: 100%; padding: 20px 0; display: none;">
		加载中...
	</div>
	<div class="nomore" style="width: 100%; padding: 20px 0; display: none; color: #d2d2d2; text-align: center;">
		没有更早的数据了
	</div>
	<div class="nodata" style="width: 100%; padding: 50px 0; display: none; color: #d2d2d2; text-align: center;">
		暂无数据
	</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
var dayArr = Array();
var start = 0;
var loadLock = false;
function loadData(){
	if(!loadLock){
		console.log('ready to ajax')
		$('.loading').show();
		var baseInfoUrl = '${pageContext.request.contextPath}/open/me/detailList?tradeType=2&limit=10&startNum='+start;
		$.ajax({
			url:baseInfoUrl,
			type:"GET",
			timeout: 2000,
			dataType:"jsonp",
			success:function (result) {
				if(result.status == 200){
					for(j = 0; result.data && j < result.data.length; j++) {
						start++;
						if(dayArr.indexOf(result.data[j].day) < 0){
							dayArr.push(result.data[j].day)
							$('#info').append('<div class="day">'+result.data[j].day+'</div>');
						}
						var itemHtml = '<div class="data">';
							itemHtml += ' <div class="time">'+result.data[j].time+'</div>';
							itemHtml += ' <div class="storeName">'+result.data[j].storeName+'</div>';
							itemHtml += ' <div class="tradeValue '+result.data[j].type+'">'+(result.data[j].type == 'add'? '+':'-')+Number(result.data[j].tradeValue)/100+'</div>';
							itemHtml += '</div>';
						$('#info').append(itemHtml);
					}
					$('.loading').hide();
					if(result.data && result.data.length > 0){
						loadLock = false;
					}else{
						loadLock = true;
						if(start==0){
							$('.nodata').show()
						}else{
							$('.nomore').show()
						}
					}
				}else{
					loadLock = true;
					//alert(result.msg);
				}
			},
			error:function(result){
				loadLock = true;
				//alert("服务器错误");
			}
		})
	}
}
$(function(){
	loadData();
    var $window = $(window);
    var $document = $(document);
    $window.scroll(function(){
        if ($document.scrollTop() + $window.height() >= $document.height()) {
        	loadData();
        }else{
        }
    });
})
</script>
</body>
</html>